<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:body>
	<ui:composition template="/template/base.xhtml">
		<ui:define name="content">
			<h:form id="rol-form">
				<p:growl id="growl" showDetail="true" sticky="true" />

				<p:dataTable id="dtRol" var="rol" 
				    value="#{rolBean.roles}" rows="10" paginator="true"
				    paginatorPosition="bottom"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="5,10,15" 
					selection="#{rolBean.rolSelected}"
					rowKey="#{rol}" selectionMode="single">

					<p:ajax event="rowSelect" listener="#{rolBean.onRowSelect}" />

					<p:column headerText="Rol" sortBy="#{rol.descripcion}">
						<h:outputText value="#{rol.descripcion}" />
					</p:column>
					<f:facet name="footer">
						<p:commandButton process="dtRol" icon="ui-icon-document"
							value="Agregar" oncomplete="PF('dlgRolAdd').show()" />
						<p:commandButton process="dtRol" icon="ui-icon-pencil"
							value="Editar" oncomplete="PF('dlgRolEdit').show()"
							update=":PdglRolEdit" disabled="#{rolBean.bloquearBotones}" />
						<!-- 						<p:commandButton process="dtCiu" -->
						<!-- 							update=":ciudad-form:ciudadDetail" icon="ui-icon-trash" -->
						<!-- 							value="Borrar" oncomplete="PF('dlgCiu').show()" /> -->
						<p:commandButton process="dtRol" icon="ui-icon-trash"
							value="Borrar" actionListener="#{rolBean.deleteRol}"
							update="dtRol" disabled="#{rolBean.bloquearBotones}">
							<p:confirm header="Borrar Rol"
								message="Estas seguro que queres borrar?" icon="ui-icon-alert" />
						</p:commandButton>
					</f:facet>
				</p:dataTable>

				<p:confirmDialog global="true" showEffect="fade"
					hideEffect="explode">
					<p:commandButton value="Si" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
					<p:commandButton value="No" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
				</p:confirmDialog>
			</h:form>
			
			<p:dialog header="Rol seleccionado" id="PdlgRolAdd"
				widgetVar="dlgRolAdd" modal="true" showEffect="fade"
				hideEffect="fade" resizable="false">
				<h:form id="form-add">
					<p:panelGrid columns="2" columnClasses="column">
						<p:outputLabel value="Rol" for="rol" />
						<p:inputText id="rol" required="true"
							value="#{rolBean.descripcion}" />
					</p:panelGrid>
					<p:commandButton process="form-add" value="Guardar"
						action="#{rolBean.addRol}"
						style="text-align:right; float:right"
						onclick="PdlgRolAdd.hide();" oncomplete=""
						update=":rol-form:dtRol,:rol-form:growl">
					</p:commandButton>
				</h:form>
			</p:dialog>



			<p:dialog header="Rol seleccionado" id="PdglRolEdit"
				widgetVar="dlgRolEdit" modal="true" showEffect="fade"
				hideEffect="fade" resizable="false">
				<h:form id="form-edit">
					<p:panelGrid columns="2" columnClasses="column">
						<p:outputLabel value="Rol" for="rolEdit" />
						<p:inputText id="rolEdit" required="true"
							value="#{rolBean.descripcion}" />
					</p:panelGrid>
					<p:commandButton process="form-edit" value="Guardar"
						action="#{rolBean.editRol}" style="text-align:right; float:right"
						onclick="PdlgRolEdit.hide();" oncomplete=""
						update=":rol-form:dtRol,:rol-form:growl">
					</p:commandButton>
				</h:form>
			</p:dialog>

		</ui:define>


	</ui:composition>

</h:body>
</html>